<template>
	<view>
		<cu-custom bgColor="bg-gradual-blue" :isBack="true">
			<block slot="content">我的推荐</block>
		</cu-custom>
		
		<view v-if="isInit" :style="'height:'+screenHeight+'px'">
			
			<uniSticky>
				<navLongTab :tabTitle="tabs" @changeTab="changeTab"></navLongTab>
			</uniSticky>
			
			<mescroll-uni ref="mescrollRef" :fixed="false" top="0" :bottom="0"  @init="mescrollInit" @down="downCallback" :up="upOption" @up="upCallback">
				<mescroll-empty v-if="emptyList"></mescroll-empty>			
				
				<!-- 评价部分 begin -->
				<view class="cu-card case" v-if="list.length>0">
					<view class="cu-item shadow"  v-for="(item,index) in list" :key="index">						
						<view class="padding-sm solid-bottom padding-lr">
							<view v-show="tabNow==0">		
								<recommendItem :type="0" @viewImage="showImageWin" @goEdit="goEdit(item.id)" @goRemove="goRemove" @showDetail="show" @goDetail="goScenery(item.scenery.id)" :item="item"></recommendItem>							
							</view>			
							<view v-show="tabNow==1">				
								<recommendItem :type="1" @viewImage="showImageWin" @goEdit="goEdit(item.id)" @goRemove="goRemove" @showDetail="show" @goDetail="goGoods(item.goods.id)" :item="item"></recommendItem>							
							</view>
						</view>
					</view>
				</view>
				<!-- 评价部分 end -->				
			</mescroll-uni>
			
			<!-- 操作条部分 begin -->
			<view class="cu-bar flex justify-center bg-white text-center foot solid-top">
				<button class="cu-btn round bg-blue" style="width: 80%;" @tap="goRecommend">我要推荐</button>
			</view>
			<!-- 操作条部分 end -->
			
			<imageView :title="showImage.title" :avatar="showImage.avatar" :showModel="showImage.model" :imageIndex="showImage.index" :images="showImage.images" @closeWin="closeImageWin"></imageView>
			
			<!-- 详情 begin -->
			<infoWin :showModel="detailModel.model" :height="70" :title="detail.name" @closeWin="closeDetailWin">
				<view slot="content">
					
					<swiper v-if="detail.imageList.length>0" class="screen-swiper square-dot" :indicator-dots="true" :circular="true"
					 :autoplay="true" interval="5000" duration="500">
						<swiper-item :data-index="index" :data-url="item" v-for="(item,index) in detail.imageList" :key="index">
							<image :src="item" mode="aspectFill"></image>
						</swiper-item>
					</swiper>
					
					<view class="text-center margin-tb-sm text-lg">
						{{detail.name}}
					</view>
					
					<view v-if="detail.type==1" class="text-left margin-sm text-lg">
						消费金额:{{detail.consume}}
					</view>
					
					<view class="text-left text-content text-lg margin-sm padding-bottom" style="line-height: 200%;">
						<rich-text :nodes="detail.descr"></rich-text>
					</view>
					
					<view v-if="detail.createTime" class="text-right margin-sm text-lg">
						创建时间:{{getDateDiff(detail.createTime)}}
					</view>					
				</view>
			</infoWin>
			<!-- 详情 end -->		
			
		</view>
		<view class="cu-load load-modal" v-else-if="!isInit">
			<view class="gray-text">加载中...</view>
		</view>
		
	</view>
</template>

<script>
	import navLongTab from "@/components/tab/navLongTab.vue"
	import recommendItem from "@/components/recommend/recommend-item.vue"	
	import imageView from '@/components/image-view/image-view.vue';
	import uniSticky from "@/uni_modules/uv-sticky/components/uv-sticky/uv-sticky.vue"	
	import infoWin from "@/components/info-win/info-win"
	
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js"; // 非uni_modules版本
	import MescrollBody from "@/components/mescroll-uni/mescroll-body.vue"; // 非uni_modules版本
	
	import {getDateDiff} from "@/utils/date/date.js"
	
	export default {
		mixins: [MescrollMixin], // 使用mixin
		components: {
			MescrollBody,recommendItem,imageView,navLongTab,uniSticky,infoWin
		},
		data() {
			return {
				screenHeight:this.s_h_notb,
				bottomHeight:this.StatusBarBottom,
				sid:0,
				upOption: {
					page: {
						size: 6 // 每页数据的数量,默认10
					},
					empty: {
						tip: '暂无景点推荐',
					},
					textNoMore:'-- 没有景点推荐 --',
					toTop:{
						offset:200,
						bottom: '210rpx',
					}
				},
				isInit:false,
				isEdit:false,
				list:[],
				showImage:{
					model:false,
					index:0,
					images:[],
					title:"",
					avatar:""
				},
				detailModel:{
					model:false,
				},
				tabNow:0,
				tabs:[{name:'景点推荐'},{name:'特产推荐'}],
				detail:{imageList:[],descr:""}
			}
		},
		onLoad() {
			this.isInit=true;
		},
		onShow() {
			if(this.isEdit){
				this.isEdit=false
				this.list=[]
				this.$nextTick(()=>{
					this.mescroll.resetUpScroll();
				})
			}
		},
		methods: {
			getDateDiff(date){
				return getDateDiff(date)
			},
			changeTab(index){
				this.tabNow=index
				this.list=[]
				this.$nextTick(()=>{
					this.mescroll.resetUpScroll();
				})	
			},
			//页面数据请求事件
			upCallback(page) {
				
				let _this=this
				let pageNum = page.num; // 页码, 默认从1开始
				
				let params={
					"p":pageNum,
					'type':this.tabNow
				}
				
				this.$api.post("/user/recommend_page",params).then(res => {
					let data=res.data;
					
					let curPageData = data.records;
					let curPageLen=curPageData.length
					let totalSize=data.total;
					
					if(page.num == 1) _this.list = []; //如果是第一页需手动置空列表
					_this.list = _this.list.concat(curPageData); //追加新数据
											
					_this.mescroll.endBySize(curPageLen, totalSize);
				})
			},
			closeImageWin(){
				this.showImage.model=false
			},
			showImageWin(e){				
				this.showImage.images=e.images
				this.showImage.index=e.now				
				this.showImage.title=e.title
				this.showImage.avatar=e.avatar
				
				this.showImage.model=true
			},
			show(item){
				this.$api.post('/user/recommend_find',{id:item.id}).then(res => {
					this.detail=res.data
					this.detailModel.model=true
				})
			},
			goRemove(item){
				this.$nextTick(()=>{
					this.mescroll.resetUpScroll();
				})
			},
			goScenery(id){
				uni.navigateTo({
					url:"/pages/scenery/detail?id="+id
				})
			},
			goGoods(id){
				uni.navigateTo({
					url:'/pages/goods/detail?id='+id
				})
			},
			goEdit(id){
				this.isEdit=true
				uni.navigateTo({
					url:'/pages/my/recommend/recommend_edit?id='+id
				})
			},
			goRecommend(){
				this.isEdit=true
				uni.navigateTo({
					url:'/pages/my/recommend/recommend'
				})
			},
			closeDetailWin(){
				this.detailModel.model=false
			},
		}		
	}
</script>

<style scoped>
</style>